<template>
	<view :class="['cu-modal drawer-modal justify-end',modalName=='DrawerModalR'?'show':'']" @tap="hideModal">
		<view class="scroll-box" :style="{minHeight:drawerH+'px',height:100+ '%'}">
			<scroll-view scroll-y :style="{minHeight:drawerH+'px',height:100+ '%'}">
				<view :style="{height:drawerH+'px'}">
					<view class="cu-dialog basis-lg" @tap.stop :style="[{'padding-top':CustomBar + 'rpx'}]">
						<view class="cu-list menu text-left">
							<form @submit="formSubmit" @reset="formReset">
								<!-- 筛选条件是否显示 -->
								<view v-if="datascreenisShow">
									<view class="cu-bar bg-white solid-bottom ">
										<view class='action'>
											<text class='cuIcon-titles text-orange'></text> 筛选条件
										</view>
									</view>
									<slot></slot>
									<!-- <view class="cu-form-group">
										<view class="title">车间</view>
										<picker @change="PickerChange" name="LCLASSINDEX" :value="index" :range="picker" range-key="LNAME">
											<view class="picker">
												{{index == -1 ? '请选择' : picker[index].LNAME}}
											</view>
										</picker>
									</view>
									<view class="cu-form-group" >
										<view class="title">性别</view>
										<picker @change="PickerChange1" name="LGENDER" :value="index1" :range="picker1" range-key="LNAME">
											<view class="picker">
												{{index1 == -1 ? '请选择' : picker1[index1].LNAME}}
											</view>
										</picker>
									</view>
									<view class="cu-form-group" >
										<view class="title">机器号</view>
										<picker @change="PickerChange2" name="LMACHINENO" :value="index2" :range="LMACpicker2" range-key="LNAME">
											<view class="picker">
												{{index2 == -1 ? '请选择' : LMACpicker2[index2].LNAME}}
											</view>
										</picker>
									</view>
									<view class="cu-form-group" >
										<view class="title">是否离职</view>
										<switch @change="SwitchA" name="LISDIMISSION" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
									</view> -->
								</view>
								<!-- 搜索条件是否显示 -->
								<view v-if="searchisShow">
									<view class="cu-bar bg-white solid-bottom ">
										<view class='action'>
											<text class='cuIcon-titles text-orange'></text> 搜索条件
										</view>
									</view>
									<radio-group class="block">
										<view class="cu-form-group" v-for="(item,index) in searchCondition" :key="index">
											<view class="">{{item.name}}</view>
											<label>
												<radio :value="item.code" :checked="item.checked"></radio>
											</label>
										</view>
									</radio-group>
								</view>
								<!-- 表格列是否显示 -->
								<view v-if="columnisShow">
									<view class="cu-bar bg-white solid-bottom ">
										<view class='action'>
											<text class='cuIcon-titles text-orange'></text> 多条件搜索
										</view>
									</view>
									<view v-for="(item,index) in columnlist" :key="index">
										<view class="cu-bar search">
											<view class="search-form round">
												<text class="cuIcon-search"></text>
												<input @input="input" :name="item.searchView" v-model="item.value" :adjust-position="false" type="text"
												 :placeholder="item.placeholder" confirm-type="search" />
											</view>
										</view>
									</view>
									<!-- <checkbox-group class="block" @change="checkboxChange">
										<label class="cu-form-group" v-for="item in column" :key="item.value">
											<view>{{item.name}}</view>
											<view>
												<checkbox :class="[item.checked == true ? 'checked': '']"  :value="item.value" :checked="item.checked" />
											</view>
										</label>
									</checkbox-group> -->
								</view>
								<!-- 搜索状态是否显示 -->
								<view v-if="isShow">
									<view class="cu-bar bg-white solid-bottom margin-top">
										<view class='action' v-if="status == 1">
											<text class='cuIcon-titles text-orange'></text> 状态
										</view>
										<view class='action' v-else-if="status == 2">
											<text class='cuIcon-titles text-orange'></text> 显示形式
										</view>
										<view class='action' v-else>
											<text class='cuIcon-titles text-orange'></text> 所属行业
										</view>
									</view>
									<radio-group class="block" name="radio_group_two">
										<view class="cu-form-group " v-for="(item,index) in searchList" :key="index">
											<view class="">{{item.name}}</view>
											<radio :value="item.value" :checked="item.checked"></radio>
										</view>
									</radio-group>
								</view>
								<!-- 时间是否显示 -->
								<view v-if="dateisShow">
									<view class="cu-bar bg-white solid-bottom margin-top">
										<view class='action'>
											<text class='cuIcon-titles text-orange '></text> 时间刷选
										</view>
									</view>
									<view class="screen_two" v-if="dateisShowyear">
										<picker mode="date" name='picker2' fields='year' :value="'2020'" start="2000-01-01" end="2030-01-01" @change="bindDateChanger">
											<view class="picker">2020</view>
										</picker>
									</view>
									<view class="screen_two" v-else>
										<picker mode="date" name='picker1' :value="dateleft" start="2000-01-01" end="2030-01-01" @change="bindDateChangel">
											<view class="picker">{{dateleft}}</view>
										</picker>
										<picker mode="date" name='picker2' :value="dateright" start="2000-01-01" end="2030-01-01" @change="bindDateChanger">
											<view class="picker">{{dateright}}</view>
										</picker>
									</view>
								</view>
								<button-father>
									<button class="cu-btn bg-blue-gradual lg shadow tb-flex cu-btn-new" form-type="reset">重置</button>
									<button class="cu-btn bg-gradual-blue lg shadow tb-flex cu-btn-new" form-type="submit">确认</button>
								</button-father>
							</form>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import ButtonFather from './ButtonFather.vue'
	export default {
		name: 'ScreenView',
		data() {
			return {
				modalName: null,
				switchA: false,
				CustomBar: this.CustomBar,
				drawerH: 0,
				error: 'error',
				success: 'success',
				list: 1,
				status: 1,
				dateleft: this.startbefore,
				dateright: global.dateright,
				datascreenisShow: this.screenisShow,
				index1: -1,
				columnlist: [{
					value: "",
					placeholder: '姓名',
					searchView: 'name'
				}, {
					value: "",
					placeholder: '车间',
					searchView: 'chejian'
				}, {
					value: "",
					placeholder: '班次',
					searchView: 'age'
				}],
				picker1: [{
						LNAME: '男'
					},
					{
						LNAME: '女'
					},
				]
			}
		},
		props: {
			isShow: {
				type: Boolean,
				default: true
			},
			startbefore: {
				type: String,
				default: global.dateleft
			},
			screenisShow: {
				type: Boolean,
				default: false
			},
			searchisShow: {
				type: Boolean,
				default: true
			},
			dateisShowyear:{
				type: Boolean,
				default: false
			},
			columnisShow: {
				type: Boolean,
				default: false
			},
			dateisShow: {
				type: Boolean,
				default: true
			},
			searchCondition: {
				type: Array,
				default: () => {
					return []
				}
			},
			searchList: {
				type: Array,
				default: () => {
					return []
				}
			},
			column: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.drawerH = res.windowHeight
				}
			})
		},
		components: {
			ButtonFather
		},
		methods: {
			hideModal() {
				this.modalName = 'null'
			},
			bindDateChangel(e) {
				this.dateleft = e.detail.value
				console.log(e.detail.value);
			},
			bindDateChanger(e) {
				this.dateright = e.detail.value
			},
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			input(value) {

			},
			checkboxChange(e) {
				var items = this.column,
					values = e.detail.value;
				this.$emit('checkboxChange', values)
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			formSubmit(e) {
				// if (this.datascreenisShow && this.index != -1) {
				// 	e.detail.value.LCLASSINDEX = this.picker[e.detail.value.LCLASSINDEX].LNAME
				// }
				e.detail.value.picker1 = this.dateleft
				function getNextDay(d){
				    d = new Date(d);
				    d = +d + 1000*60*60*24;
				    d = new Date(d);
				    //return d;
				    //格式化
					let y = d.getMonth()+1
					let t = d.getDate()
				    return d.getFullYear()+"-" + ( y < 10 ? '0' + y : y) + '-' + (t < 10 ? '0' + t : t)
				}
				e.detail.value.picker2 = getNextDay(this.dateright)
				this.modalName = 'null'
				this.$emit('formSubmit', e.detail.value)
			},
			PickerChange(e) {
				this.index = e.detail.value
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			formReset(e) {
				console.log(e);
				e.detail.picker1 = ""
				e.detail.picker2 = ""
				e.detail.radio_group = "error"
				e.detail.radio_group_two = "0"
				this.switchA = false
				this.index = -1
				this.index1 = -1
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f5f6;
	}

	.screen_two {
		display: flex;
		font-size: 25rpx;
		width: 100%;
		background: #fff;

		.picker {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			border-radius: 30rpx;
		}
	}

	.screen_two view {
		padding-left: 5%;
	}

	.screen_two picker {
		flex: 5;
	}

	.screen_two picker:first-child {
		padding-left: 5%;
	}
</style>
